<template>
  <div class="page-container">
    <transition
      v-on:before-enter="beforeEnter"
      v-on:leave="leave"
      v-bind:css="false"
    >
    <div v-show="showAction">
      <headInfoTitle
        :zh-title="'楼层信息'"
        :en-title="'FLOOR DETAILS'"
      ></headInfoTitle>
    </div>
    </transition>
    <div class="content">
      <transition
        v-on:before-enter="beforeEnter"
        v-on:leave="leave"
        v-bind:css="false"
      >
        <div v-show="showAction">
          <div class="content-title">
            <div class="content-title--left">
              <div class="content-title--img">10</div>
              <div class="content-title--text">
                <span>选定楼层</span>
                <span>Selected floor</span>
              </div>
            </div>

            <div class="content-title--right">
              <img src="../assets/yonghu.png" alt="" />
              <span>088/128</span>
            </div>
          </div>

          <div class="content-title-list">
            <div
              v-for="(item, index) in titleList"
              :key="index"
              class="title-list-item"
            >
              <span>{{ item.titleIndex }}</span>
              <span class="list-item-text">
                {{ item.name }}
                <span class="text-en">
                  {{ item.enName }}
                </span>
              </span>
            </div>
          </div>
        </div>
      </transition>
      <transition
        v-on:before-enter="beforeEnter"
        v-on:leave="leave"
        v-bind:css="false"
      >
        <div>
          <div class="content-flex">
            <div class="content--device">
              <div class="device-title">
                /
                <div class="title-text">
                  <span> 会议设备 </span>
                  <span class="title-text--en"> equipment </span>
                </div>
              </div>
              <div
                v-for="(item, index) in deviceList"
                :key="index"
                class="title-list-items"
              >
                <span>{{ item.titleIndex }}</span>
                <span class="list-item-text">
                  {{ item.name }}
                  <span class="text-en">
                    {{ item.enName }}
                  </span>
                </span>
              </div>
            </div>
            <div class="content-safe">
              <div class="device-title">
                /
                <div class="title-text">
                  <span> 安全 </span>
                  <span class="title-text--en"> security </span>
                </div>
              </div>
              <div
                v-for="(item, index) in safeList"
                :key="index"
                class="title-list-items"
              >
                <span>{{ item.titleIndex }}</span>
                <span class="list-item-text">
                  {{ item.name }}
                  <span class="text-en">
                    {{ item.enName }}
                  </span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </transition>
      <transition
        v-on:before-enter="beforeEnter"
        v-on:leave="leave"
        v-bind:css="false"
      >
        <div v-show="showAction">
          <div class="content-circle">
            <div class="circle-item" v-for="(item, index) in 3" :key="index">
              <div :id="'cyOption'+index"></div>
              <div class="circle-text">
                <span>工位</span>
                <span>Station</span>
                <span>493.3</span>
              </div>
            </div>
          </div>
          <div class="footer">
            <div
              v-for="(item, index) in footerList"
              :key="index"
              v-html="item.name"
              class="footer-item"
            >
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import headInfoTitle from "./stopInfo/headInfoTitle";
import { coordinateSystem } from "../tools/echarts";
export default {
  name: "floorInfo",
  components: {
    headInfoTitle,
  },
  data() {
    return {
      titleList: [
        { name: "工位", titleIndex: "118", enName: "Station" },
        {
          name: "会议室",
          titleIndex: "18",
          enName: "Station",
        },
        {
          name: "办公室",
          titleIndex: "12",
          enName: "office",
        },
        { name: "办公室", titleIndex: "10", enName: "office" },
        { name: "员工工位", titleIndex: "88", enName: "Employee Station" },
        {
          name: "员工工位",
          titleIndex: "06",
          enName: "Employee Station",
        },
        {
          name: "工具室 & 实验室",
          titleIndex: "08",
          enName: "Employee Station",
        },
        {
          name: "工具室 & 实验室",
          titleIndex: "02",
          enName: "Employee Station",
        },
        { name: "董事长办公室", titleIndex: "10", enName: "Ohairmons Office" },
      ],
      deviceList: [
        { name: "办公室", titleIndex: "08", enName: "office" },
        {
          name: "员工工位",
          titleIndex: "06",
          enName: "Employee Station",
        },
        {
          name: "工具室 & 实验室",
          titleIndex: "08",
          enName: "Employee Station",
        },
        {
          name: "董事长办公室",
          titleIndex: "04",
          enName: "Ohairmons Office",
        },
      ],
      safeList: [{ name: "办公室", titleIndex: "14", enName: "office" }],
      footerList: [
        { img: require(`../assets/椭圆2.png`), name: "楼层<br>信息" },
        { name: "灯光<br>控制" },
        { name: "空间<br>利用" },
        { name: "会议<br>室" },
      ],
    };
  },
  mounted(){
    setTimeout(() => {
      this.init()
    }, 1000);
  },
  methods:{
    init(){
      for (let i = 0; i < 3; i++) {
        coordinateSystem({id:'cyOption'+i,color:'rgba(299, 151, 15, 1)',color1:'rgba(299, 151, 15, 0.2)',title:{
            text: '{a|' + 50 + '%}',
            x: 'center',
            y: 'center',
            textStyle: {
                rich: {
                    a: {
                        fontSize: 10,
                        lineHeight: 14,
                        color: '#fff'
                    }
                }
            }
        }})
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import '@/assets/scss/common.scss';
.content {
  margin-top: cheight(38);
}

.content-title {
  color: #fff;
  font-weight: 600;
  font-size: 26px;
  display: flex;
  flex-direction: row;
  text-align: center;
  align-items: center;
}

.content-title--left,
.content-title--right {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 50%;
}

.content-title--img {
  background: url("../assets/椭圆.png") no-repeat;
  width: cwidth(60);
  height: cheight(60);
  line-height: cheight(60);
}

.content-title--text {
  display: flex;
  flex-direction: column;
  margin-left: cwidth(5);
}

.content-title--text span:nth-child(1) {
  font-size: 14px;
}

.content-title--text span:nth-child(2) {
  font-size: 9px;
}

.content-title-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  color: #fff;
}

.title-list-items {
  font-size: 22px;
  color: #aaaeb0;
  margin-top: cheight(4);
  display: flex;
  flex-direction: row;
  align-items: center;
}
.title-list-item {
  width: 50%;
  font-size: 22px;
  color: #aaaeb0;
  margin-top: cheight(4);
  display: flex;
  flex-direction: row;
  align-items: center;
}

.title-list-item span {
  margin-right: cwidth(4);
}
.title-list-items span {
  margin-right: cwidth(4);
}

.list-item-text {
  display: flex;
  flex-direction: column;
  font-size: 10px;
}

.title-list-item:nth-child(1),
.title-list-item:nth-child(2) {
  font-size: 28px;
  color: #fff;
}

.content-flex {
  display: flex;
  flex-direction: row;
  margin-top: cheight(32);
}

.content--device,
.content-safe {
  color: #fff;
  width: 50%;
}

.device-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 28px;
  color: #d59f49;
}

.title-text {
  display: flex;
  flex-direction: column;
  margin-left: cwidth(36);
  font-size: 16px;
}

.title-text--en {
  font-size: 10px;
}

.content-circle {
  display: flex;
  flex-direction: row;
  margin-top: cheight(50);
}

.circle-item {
  width: 33.33%;
  color: #fff;
  position: relative;
  >div:first-child{
    height: cheight(80);
  }
}

.circle-item--img {
  position: relative;
}
.circle-item--percent {
  position: absolute;
  top: 30%;
  left: 15%;
  transform: translate(-50%, -50%);
}

.circle-text {
  display: flex;
  flex-direction: column;
}

.circle-text > span:nth-child(1) {
  font-size: 14px;
}

.circle-text > span:nth-child(2) {
  font-size: 10px;
}

.circle-text > span:nth-child(3) {
  font-size: 20px;
}

.footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-size: 16px;
  line-height: cheight(18);
  color: #48B0C2;
}
.footer-item {
  background: url("../assets/椭圆2.png") no-repeat;
  width: cwidth(68);
  height: cheight(68);
  margin-top: cheight(20);
  margin-right: cheight(20);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer>div:last-child{
  margin-right: 0;
}
</style>
